<template>
    <div class="container">
        <div class="return-page" @click="$router.push('/')">
            <img src="../assets/images/return.svg" alt="">
        </div>
        <div class="login-container d-flex align-items-center justify-content-center vh-100">
            <div class="row w-100">
                <div class="col-md-6 d-md-block">
                    <img src="../assets/images/login_bg.webp" alt="Login Background" class="img-fluid">
                </div>
                <div class="col-md-6 d-flex align-items-center justify-content-center">
                    <el-card class="box-card shadow-lg">
                        <div slot="header" class="text-center">
                            <span>欢迎登录</span>
                        </div>
                        <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px"
                            class="demo-ruleForm">
                            <!-- 手机号码 -->
                            <el-form-item label="" prop="phone" style="width: 100%;">
                                <el-input v-model="loginForm.phone" placeholder="请输入手机号码"></el-input>
                            </el-form-item>

                            <!-- 密码 -->
                            <el-form-item label="" prop="password" style="width: 100%;">
                                <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                            </el-form-item>

                            <!-- 记住密码 -->
                            <el-form-item>
                                <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                            </el-form-item>

                            <!-- 按钮组 -->
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('loginForm')"
                                    class="login_bt">登录</el-button>
                                    &nbsp; &nbsp;
                                <router-link to="/register" class="">
                                    <el-button type="success" class="register_bt">注册</el-button>
                                </router-link>
                                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                <router-link to="#" class="">
                                    <span class="forget_pw">忘记密码？点击这里找回</span>
                                </router-link>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            loginForm: {
                phone: '',
                password: '',
                rememberMe: false,
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 这里添加你的登录逻辑
                    console.log('Phone:', this.loginForm.phone);
                    console.log('Password:', this.loginForm.password);
                    console.log('Remember Me:', this.loginForm.rememberMe);
                    alert('提交成功!');
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        }
    }
}
</script>


<style scoped>
a{
    text-decoration: none;
}
.return-page{
    position: fixed;
    top: 30px;
    cursor: pointer;
}
.text-center{
    font-size: 25px;
    font-weight: normal;
    font-style: normal;
    color: #000;
}
.el-card{
    width: 500px;
    background-color: rgba(247,247,247,0.9);
    padding: 50px;
    box-shadow: 0px 0px 20px #dddddd;
    border-radius: 5px;
}
.login_bt{
    background: rgba(255,144,3);
    border: 0;
}
.register_bt{
    background: transparent;
    border: 1px solid rgba(255,144,3);
    color: rgba(255,144,3);
}
.forget_pw{
    color: #999;
}
.forget_pw:hover{
    color: #333;
}
</style>